<template>
	<view class="container">
		<view class="header nav-header" :style="{backgroundImage:'url('+tui.website+'static/home/img/topbg4.png)',paddingTop:top+'px'}">
			<view class="page-title" style="color: #FFF;">
				<view class="back-btn">
					<tui-icon name="arrowleft" color="#fff" @click="back"></tui-icon>
				</view>
				<text>客服消息</text>
			</view>
		</view>
		<view class="tui-top" :style="{paddingTop:(35 + top)+'px'}">
			<tui-no-data v-if="nodata" :fixed="false" imgUrl="/static/images/toast/img_nodata.png">暂无数据</tui-no-data>
			<tui-list-cell @click="href(idx,msg.id,msg.read_time)" :radius="true" v-for="(msg ,idx) in msgList" :key="msg.id" >
				<view class="tui-message-item">
					<view class="tui-title-box">
						时间：{{msg.create_time}}
						<text class="tag-no-read" v-if="msg.read_time <1">未读</text>
					</view>
					<view class="content">
						{{msg.content}}
					</view>
				</view>
			</tui-list-cell>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:1,
				nodata:true,
				msgList:[],
				last_page:2,
				page:1,
			};
		},
		onLoad(opt) {
			this.type =1;
			if(opt.type){
				this.type = opt.type
			}
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			uni.getSystemInfo({
				success: (res) => {
					this.width = obj.left || res.windowWidth;
					this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
					this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
					// this.scrollH = res.windowWidth * 0.6
				}
			})
		},
		onShow(){
			this.getlists();
		},
		methods: {
			href(key,id,t) {
				if(this.msgList[key].type ==4){
					uni.navigateTo({
						url: "../myOrder/check?id="+this.msgList[key].order_id,
					});
				}else{
					if(this.msgList[key].order_id){
						uni.navigateTo({
						url: "../myOrder/detail?oid="+this.msgList[key].order_id,
					});
					}
				}
				if(t){return;}
				this.tui.get('user/api/readmsg',{id:id});
				this.msgList[key].read_time =1000;
				//TODO  
			},
			getlists(){
				if(this.last_page < this.page){return;}
				this.tui.get('user/api/msglist',{type:this.type}).then(res=>{
					this.last_page =res.data.last_page;
					this.page++;
					this.msgList=[...this.msgList,...res.data.data];
					if(this.msgList.length <1){
						this.nodata = true
					}else{
						this.nodata = false
					}
				})
			},
			back(){
				uni.navigateBack()
			}
		},
		onReachBottom() {
			this.getlists();  
		},  
	};
</script>

<style lang="scss">
	.container {
		padding:20rpx 0 48rpx;
		.tui-top{padding: 20upx 30upx;margin-top: 20rpx;}
		.tui-list-cell{
			margin-bottom: 30upx;
			border-radius: 30upx;
		}

		.tui-message-item {
			width: 100%;
			display: block;
			box-sizing: border-box;
			.tui-title-box {
				font-size: 24upx;
				color: #999999;
				border-bottom: 1px solid #EEEEEE;
				padding: 20upx 0;
				.tag-no-read{
					background-color: #FF2B3F;
					color: #FFFFFF;
					padding: 4upx 8upx;
					margin-left: 20upx;
					border-radius: 10upx;
				}
			}
			
			.content{
				padding: 20upx 0;
				font-size: 28upx;
				font-weight: 700;
				line-height: 1.5;
			}
		}
	}
</style>
